<template>
  <div class="order">
    <div class="charge-box">
      <div class="box-top">
        <div class="charge-name">张三充电站</div>
        <div class="price">1.6币/度</div>
      </div>
      <p class="address">
        <van-icon name="location-o" />
        <span>北京市昌平区南口镇</span>
      </p>
    </div>
    <div class="time-box">
      <img src="@/assets/img/charge.jpg" alt="" />
      <p class="time-text">充电时长</p>
      <p class="time">{{ hour }}:{{ minute }}:{{ second }}</p>
    </div>
    <div class="order-info">
      <div class="item">
        <div class="item-left">订单编号：</div>
        <div class="item-right">{{ order_No }}</div>
      </div>
      <div class="item">
        <div class="item-left">开始时间</div>
        <div class="item-right">{{ date }}</div>
      </div>
      <div class="item">
        <div class="item-left">使用电额</div>
        <div class="item-right">10度</div>
      </div>
      <div class="item">
        <div class="item-left">实付充电币</div>
        <div class="item-right">0.12币</div>
      </div>
      <div class="item">
        <div class="item-left">获得积分</div>
        <div class="item-right">1</div>
      </div>
      <div class="item">
        <div class="item-left">充电桩编号：</div>
        <div class="item-right">{{ obj.chargePile }}</div>
      </div>
      <div class="item">
        <div class="item-left">充电桩类型：</div>
        <div class="item-right">90KWH</div>
      </div>
      <div class="item">
        <div class="item-left">当前电量</div>
        <div class="item-right">0Kwh</div>
      </div>
      <div class="item">
        <div class="item-left">当前充电币</div>
        <div class="item-right">0充电币</div>
      </div>
    </div>
    <div class="btn" @click="overTime">结束充电</div>
  </div>
</template>

<script>
import Moment from 'moment'
export default {
  data() {
    return {
      hour: "00",
      minute: "00",
      ms: "00",
      second: "00", //秒
      time: "",
      str: "",
      date: '',
      ONOFF: true,
      order_No: new Date().getTime(),
      obj: {}
    };
  },
  methods: {
    overTime() {
      this.ONOFF = false
      this.stop()
      let obj = {
        order_No: this.order_No,
        date: this.date,
        chargePile: this.obj.chargePile,
        chargeTime: this.str
      };
      this.$router.push({
        path: "/chargeing",
        query: {
          obj
        }
      })
    },
    timeStart() {
      if (this.ONOFF) {
        console.log(111111)
        this.time = setInterval(this.timer, 50);
      }
      this.ONOFF = false;
    },
    timer() {
      //定义计时函数
      this.ms = this.ms + 50; //毫秒
      if (this.ms >= 1000) {
        this.ms = 0;
        this.second = this.toDub(this.second * 1 + 1); //秒
      }
      if (this.second >= 60) {
        this.second = 0;
        this.minute = this.toDub(this.minute * 1 + 1); //分钟
      }
      if (this.minute >= 60) {
        this.minute = 0;
        this.hour = this.toDub(this.hour * 1 + 1); //小时
      }
      this.str =
        this.hour +
        ":" +
        this.minute +
        ":" +
        this.second; /*+""+this.toDubms(this.ms)+"毫秒"*/

      // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
    },

    toDub(n) {
      //补0操作
      if (n < 10) {
        return "0" + n;
      } else {
        return "" + n;
      }
    },

    stop() {
      console.log("暂停");
      clearInterval(this.time);
    },
    getFullTime() {
      const stamp = new Date();
      const time = Moment(stamp).format("YYYY-MM-DD HH:mm:ss");
      return time;
    },
  },
  created() {
    this.timeStart()
    this.obj = this.$route.query.obj;
    this.date = this.getFullTime();
    console.log(this.$route.query.obj)
  },
};
</script>

<style lang='sass' scoped>
.order
  width: 100%
  height: calc(100vh - 96px)
  background: #ccc
  overflow: auto
  .charge-box
    width: 100%
    padding: .2rem
    margin-top: .1rem
    background: #fff
    .box-top
      display: flex
      justify-content: space-between
      font-size: .28rem
      line-height: .4rem
      .charge-name
        font-size: .32rem
        font-weight: bold
      .price
        color: orange
    .address
      margin-top: .1rem
      font-size: .28rem
      line-height: .4rem
      display: flex
      align-items: center
      i
        font-size: .38rem
        margin-right: .1rem
  .time-box
    width: 100%
    padding: .3rem .2rem
    margin-top: .1rem
    background: #fff
    display: flex
    justify-content: space-between
    color: #59c883
    .time-text
      width: 1rem
    .time
      font-size: .48rem
      line-height: .84rem
  .order-info
    width: 100%
    padding: .2rem
    margin-top: .1rem
    background: #fff
    .item
      display: flex
      justify-content: space-between
      line-height: .8rem
      font-size: .28rem
  .btn
    width: 6rem
    height: .8rem
    margin: .5rem auto
    text-align: center
    line-height: .8rem
    background: #666
    color: #fff
</style>